<template>
  <div class="image-drop-container">
    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="previewVisible = false"
      width="80%"
    >
      <div style="max-height: 80vh; overflow: auto">
        <img
          :src="previewImageUrl"
          style="width: 100%; max-height: 100%; object-fit: contain"
        />
      </div>
    </a-modal>
    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      style="display: none"
      @change="handleFileSelect"
    >
    <div
      class="image-drop"
      @dragover.prevent="handleDragOver"
      @dragleave="handleDragLeave"
      @drop.prevent="handleDrop"
      @click="handleClick"
      :class="{ 'drag-over': isDragging }"
    >
      <div v-if="!value" class="image-drop-content">
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="image-drop-text">Upload</div>
      </div>
      <div v-else class="image-preview">
        <img
          v-if="isExternalUrl"
          :src="value"
          alt="Preview"
          class="preview-image"
        />
        <img
          v-else
          :src="previewUrl"
          alt="Preview"
          class="preview-image"
        />
        <div class="image-actions">
          <a-icon type="delete" @click="handleRemove" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageDrop',
  props: {
    value: {
      type: [String, File],
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isDragging: false,
      previewUrl: '',
      previewVisible: false,
      previewImageUrl: ''
    }
  },
  computed: {
    isExternalUrl () {
      return typeof this.value === 'string' && this.value.startsWith('http')
    }
  },
  watch: {
    value (newVal) {
      if (newVal instanceof File) {
        this.createPreview(newVal)
      }
    }
  },
  methods: {
    handleDragOver () {
      this.isDragging = true
    },
    handleDragLeave () {
      this.isDragging = false
    },
    handleDrop (e) {
      this.isDragging = false
      const files = e.dataTransfer.files
      if (files && files.length > 0) {
        const file = files[0]
        if (file.type.startsWith('image/')) {
          this.$emit('input', file)
        }
      }
    },
    handleRemove (e) {
      e.stopPropagation()
      this.$emit('input', '')
      this.previewUrl = ''
      this.$refs.fileInput.value = ''
    },
    createPreview (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.previewUrl = e.target.result
      }
      reader.readAsDataURL(file)
    },
    handleClick () {
      if (this.value) {
        this.previewImageUrl = this.isExternalUrl ? this.value : this.previewUrl
        this.previewVisible = true
      } else {
        this.$refs.fileInput.click()
      }
    },
    handleFileSelect (e) {
      const files = e.target.files
      if (files && files.length > 0) {
        const file = files[0]
        if (file.type.startsWith('image/')) {
          this.$emit('input', file)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.image-drop-container {
  display: inline-block;
}

.image-drop {
  width: 104px;
  height: 104px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  background-color: #fafafa;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &:hover {
    border-color: #1890ff;
  }

  &.drag-over {
    border-color: #1890ff;
    background-color: #e6f7ff;
  }
}

.image-drop-content {
  padding: 8px;
}

.image-drop-text {
  margin-top: 8px;
  color: rgba(0, 0, 0, 0.65);
}

.image-drop-hint {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 4px;
}

.image-preview {
  width: 100%;
  height: 100%;
  position: relative;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-actions {
  position: absolute;
  right: 8px;
  top: 8px;
  opacity: 0;
  transition: opacity 0.3s;

  .image-preview:hover & {
    opacity: 1;
  }

  i {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background: rgba(0, 0, 0, 0.8);
    }
  }
}
</style>
